import React, { Component } from "react";
import "./css/captcha.css";
import axios from "axios";
import { imgVerify } from "./../../../utils/captcha";

export default class button extends Component {
  constructor(props) {
    super(props);
    this.state = {
      dragging: false,
      startPageX: 0,
      offsetPageX: 0,
      dragRotate: 0,
      timmout: false,
      mask: false,
      err: false,
      succ: false,
      data: null,
      isVerify: false,
      //元素临界点
      element: "",
    };
  }

  //获取图片资源
  componentDidMount() {
    this.fetchData();
  }

  fetchData() {
    const { imgUrl } = this.props;
    axios.get(imgUrl).then((res) => {
      let { data } = res.data;
      if (res.data.code === 200) {
        this.setState({
          data: data,
        });
      }
    });
  }
  handleMouseDown(event) {
    this.setState({
      dragging: true,
      timmout: true,
      startPageX: event.pageX,
    });
  }
  handleMouseMove(event) {
    if (this.state.dragging) {
      let offset = event.pageX - this.state.startPageX;
      let degRotate = Math.ceil((offset - 1) * 1.706);
      if (0 <= offset && offset <= 212 && 0 <= degRotate) {
        this.setState({
          offsetPageX: offset,
          dragRotate: degRotate,
          element: "legitimat",
        });
        this.getDraggingStyle();
      }
      if (offset < -15) {
        this.setState({
          dragging: false,
          element: "lesslegitimat",
        });
        this.getDraggingStyle();
        setTimeout(() => {
          this.setState({
            timmout: false,
            mask: false,
            err: false,
            offsetPageX: 0,
            dragRotate: 0,
            succ: false,
            element: "",
          });
        }, 500);
      }
      if (220 < offset) {
        this.setState({
          dragging: false,
          element: "morelegitimat",
        });
        this.getDraggingStyle();
        setTimeout(() => {
          this.setState({
            timmout: false,
            mask: false,
            err: false,
            offsetPageX: 0,
            dragRotate: 0,
            succ: false,
            element: "",
          });
        }, 500);
      }
    }
  }

  handleMouseUp() {
    const {
      offsetPageX,
      element,
      data,
      dragRotate,
    } = this.state;
    if (offsetPageX !== 0) {
      imgVerify(data, dragRotate).then((res) => {
        if (res.suited) {
          this.setState({
            succ: true,
            isVerify: true,
          });
        } else {
          if (element === "legitimat") {
            this.setState({
              mask: true,
              err: true,
            });
          }
          this.fetchData();
          setTimeout(() => {
            this.setState({
              timmout: false,
              mask: false,
              err: false,
              offsetPageX: 0,
              dragRotate: 0,
              succ: false,
            });
          }, 500);
        }
      });
    }
    this.setState({
      dragging: false,
    });
  }
  //元素拖拽时的行为样式
  getDraggingStyle() {
    let { movingColor, movendColor } = this.props;
    const { element } = this.state;
    switch (element) {
      case "lesslegitimat":
        return {
          backgroundColor: movendColor
            ? movendColor
            : "red",
          transform: `translateX( ${0}px)`,
        };
      case "legitimat":
        return {
          backgroundColor: movingColor
            ? movingColor
            : "skyblue",
          transform: `translateX( ${this.state.offsetPageX}px)`,
        };
      case "morelegitimat":
        return {
          backgroundColor: movendColor
            ? movendColor
            : "red",
          transform: `translateX( ${212}px)`,
        };
      default:
        return {};
    }
  }
  getStyle() {
    return {
      backgroundColor: "#fff",
    };
  }
  getRotatingStyly() {
    return {
      transform: `rotate( ${this.state.dragRotate}deg)`,
    };
  }
  render() {
    const {
      mask,
      err,
      succ,
      timmout,
      data,
      isVerify,
      element,
      offsetPageX,
    } = this.state;
    const { getImgVerify } = this.props;
    return (
      <>
        {this.state.data ? (
          <div className="img">
            <div className={mask ? "mask_hide" : ""}></div>
            <div className={err ? "err_hide" : ""}></div>
            <div className={succ ? "succ" : ""}></div>
            <img
              className="rotate_img"
              style={timmout ? this.getRotatingStyly() : {}}
              src={data.imgurl}
              alt=""
            />
          </div>
        ) : (
          ""
        )}
        <div className="sliding">
          <div
            className="sliding_input"
            onMouseMove={(event) => {
              this.handleMouseMove(event);
            }}
          >
            <div
              className={[
                "sliding_block",
                element && element === `morelegitimat`
                  ? "more"
                  : null,
                element && element === `lesslegitimat`
                  ? "less"
                  : null,
              ].join(" ")}
              style={
                timmout
                  ? this.getDraggingStyle()
                  : this.getStyle()
              }
              onMouseDown={(event) =>
                this.handleMouseDown(event)
              }
              onMouseUp={(event) =>
                this.handleMouseUp(event)
              }
              onClick={
                offsetPageX !== 0
                  ? () => getImgVerify(isVerify)
                  : () => {}
              }
            >
              <p className="p_img"></p>
            </div>
          </div>
        </div>
      </>
    );
  }
}
